<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>创建地图</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=SZUBZ-NKQ6N-2FHF3-SQOOE-NP2BV-2HF4U"></script>
<script charset="utf-8" src="/static/js/jquery.js"></script>
<style type="text/css">
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #container {
        width: 100%;
        height: 100%;
    }
</style>

<body onload="initMap()">
    <div id="container"></div>
    <script type="text/javascript">
		
		var map;
		
		var csLat;
		var csLng;
		//点击获取经纬度
		var djLat;
		var djLng;
		
		var markerLayer;
		
		//标记不否mark被点击，解决冒泡问题
		var isMarkClick;
		
		//阻止冒泡方法
		function stopPropagation(e) {
			// console.log(e)
		        e = e || window.event;
		        if(e.stopPropagation) {
					console.log("w3c")
		            e.stopPropagation(); //W3C阻止冒泡方法
					// e.preventDefault();
		        } else {
					console.log("ie")
		            e.cancelBubble = true; //IE阻止冒泡方法
		        }
		    }
		
		//定义地图点击事件处理方法
		function clickHandler(evt){
		    djLat = evt.latLng.getLat().toFixed(6);
		    djLng = evt.latLng.getLng().toFixed(6);
		    // console.log("您点击的的坐标是："+ djLat + "," + djLng);
			//使用$.ajax()发送异步请求,获取逆地址信息
			$.ajax({
			   url:"http://localhost:11000/app/map/getLocation",//请求路径
				type:"GET",//请求方式
				//data: "username=jack&age=23"
				// data:{"username":"jack","age":23}, // 默认写法
				data:{"lng":djLng,"lat":djLat},
				success:function (data) {// 接收服务器响应的值
				   // console.log(data)
				},//响应成功后的回调函数
				error:function () {
				   alert("出错了...")
				},//表示如果请求响应出现错误，会执行的回调函数
				dataType:"json"// 设置接受到的响应数据格式
			});
			
			if(isMarkClick)
			{
				isMarkClick=false;
			}
			else
			{
				//点击后加入mark标记
				markerLayer.add([{
					// "id": "3",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
					"styleId": 'myStyle',  //指定样式id
					"position": new TMap.LatLng(djLat, djLng),  //点标记坐标位置
					"properties": {//自定义属性
						"title": "marker3"
						}
					}
				])
				console.log(markerLayer)
			}
		};
		
		//获取当前经伟度成功处理方法
		function getLocationSuccess(evt){
			console.log('成功');
		    csLat = evt.coords.latitude;
		   csLng = evt.coords.longitude;
		   map.setCenter(new TMap.LatLng(csLat,csLng));
		   console.log('当前位置经度：' + csLng);
		   console.log('当前位置纬度：' + csLat);
		};
		
		//获取当前经伟度失败处理方法
		function getLocationError(evt){
			console.log('失败');
			  switch (evt.code) {
					case evt.PERMISSION_DENIED:
						console.log('用户拒绝了位置请求');
						break;
					case evt.POSITION_UNAVAILABLE:
						console.log('无法获取当前位置');
						break;
					case evt.TIMEOUT:
						console.log('获取位置超时');
						break;
					case evt.UNKNOWN_ERROR:
						console.log('发生未知错误');
						break;
				}
		};
		
        function initMap() {
			//通过浏览器方法getCurrentPosition获取当前位置
			 if (navigator.geolocation) {
				 console.log('支持');
			       navigator.geolocation.getCurrentPosition(
			            getLocationSuccess,
			            getLocationError
			        );
			    } else {
			        console.log('浏览器不支持Geolocation API');
			    }

			//地图初始化
            var center = new TMap.LatLng(39.984120,116.307484);
            //初始化地图
            map = new TMap.Map("container", {
                rotation: 20,//设置地图旋转角度
                pitch:30, //设置俯仰角度（0~45）
                zoom:12,//设置地图缩放级别
                center: center//设置地图中心点坐标
            });
			
			//定义事件处理方法，（提取到外面了）
			// var clickHandler=function(evt){
			//     var lat = evt.latLng.getLat().toFixed(6);
			//     var lng = evt.latLng.getLng().toFixed(6);
			//     console.log("您点击的的坐标是："+ lat + "," + lng);
			// }
			//Map实例创建后，通过on方法绑定点击事件
			map.on("click",clickHandler)
			
			
			//开始标记的处理，创建并初始化MultiMarker
			markerLayer = new TMap.MultiMarker({
			    map: map,  //指定地图容器
			    //样式定义
			    styles: {
			        //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
			        "myStyle": new TMap.MarkerStyle({ 
			            "width": 25,  // 点标记样式宽度（像素）
			            "height": 35, // 点标记样式高度（像素）
			            "src": '../img/marker.png',  //图片路径
			            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
			            "anchor": { x: 16, y: 32 }  
			        }) 
			    },
			    //点标记数据数组
			    geometries: [{
			        "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
			        "styleId": 'myStyle',  //指定样式id
			        "position": new TMap.LatLng(39.954104, 116.357503),  //点标记坐标位置
			        "properties": {//自定义属性
			            "title": "marker1"
			        }
			    }, {//第二个点标记
			        "id": "2",
			        "styleId": 'marker',
			        "position": new TMap.LatLng(39.994104, 116.287503),
			        "properties": {
			            "title": "marker2"
			        }
			    }
			    ]
			});
			
			//给markmap绑定点击事件
			//监听回调函数（非匿名函数）
			var clickHandlerMark = function (evt) {
			       // alert(evt.geometry.properties.title)
				   // console.log(evt.geometry)
				   console.log("mark被点击了")
				   markerLayer.remove([evt.geometry.id])
				   // evt.stopPropogation();
				   isMarkClick=true;
				   stopPropagation(evt);
				   return false;
			}
			//监听marker点击事件
			markerLayer.on("click", clickHandlerMark);
			 
			//解绑点击事件，要求事件处理方法不能是匿名方法
			// function eventOff(){
			//     marker.off("click", clickHandler)
			// }
			
			
			var infoWindowLocation = new TMap.LatLng(27.383512,118.070496);//创建一个坐标
			//创建InfoWindow实例，并进行初始化
			var infoWindow = new TMap.InfoWindow({
			    map: map,
			    position: infoWindowLocation,
			    //设置infoWindow，content支持直接传入html代码，以实现各类内容格式需求
			    content: "<div><img src='../img/em.jpg'><p>Hello World!</p></div><a href='www.baidu.com'>aaa</a>"
			});
			
			//初始化imageTileLayer
			// var imageTileLayer = new TMap.ImageTileLayer({
			//     getTileUrl: function (x, y, z) {
			//         //拼接瓦片URL
			//         var url='http://localhost/javascript_gl/sample/img/tilelayer/' + z + '/' + x + '_' + y +'.png' ;
			//         return url;
			//     },
			//     tileSize: 256,  //瓦片像素尺寸
			//     minZoom: 14,    //显示自定义瓦片的最小级别
			//     maxZoom: 16,    //显示自定义瓦片的最大级别
			//     visible: true,  //是否可见
			//     zIndex: 5000,   //层级高度（z轴）
			//     opacity: 0.95   //图层透明度：1不透明，0为全透明
			//     map: map,       //设置图层显示到哪个地图实例中
			// });
			
			//自义图层，全域地图功能
			    TMap.ImageTileLayer.createCustomLayer({
			      layerId: '65dd9ef10634',
			      map: map
			    }).then(customLayer => {
			      if (customLayer) {
			        // 成功创建个性化图层
			        console.log('done');
			      } else {
			        // 创建失败，请查看控制台错误信息
			        console.log('fail');
			      }
			    });
	
        }
		
		
		
		
		//ajax方法测试
		//定义方法
		// function fun() {
		// 	//使用$.ajax()发送异步请求
		// 	$.ajax({
		// 	   url:"https://apis.map.qq.com/ws/location/v1/ip",//请求路径
		// 		type:"GET",//请求方式
		// 		//data: "username=jack&age=23"
		// 		// data:{"username":"jack","age":23}, // 默认写法
		// 		data:{"ip":"111.206.145.41","key":"SZUBZ-NKQ6N-2FHF3-SQOOE-NP2BV-2HF4U"},
		// 		success:function (data) {// 接收服务器响应的值
		// 		   console.log(data)
		// 		},//响应成功后的回调函数
		// 		error:function () {
		// 		   alert("出错了...")
		// 		},//表示如果请求响应出现错误，会执行的回调函数
		// 		dataType:"json"// 设置接受到的响应数据格式

		// 	});
		// };
		//获取用户ip定位
		function fun() {
			//使用$.ajax()发送异步请求
			$.ajax({
			   url:"http://localhost:11000/app/map/getUserLocal",//请求路径
				type:"GET",//请求方式
				//data: "username=jack&age=23"
				// data:{"username":"jack","age":23}, // 默认写法
				data:{"ip":"111.206.145.41","key":"SZUBZ-NKQ6N-2FHF3-SQOOE-NP2BV-2HF4U"},
				success:function (data) {// 接收服务器响应的值
				   console.log(data)
				},//响应成功后的回调函数
				error:function () {
				   alert("出错了...")
				},//表示如果请求响应出现错误，会执行的回调函数
				dataType:"json"// 设置接受到的响应数据格式
			});
		};
		// fun();
		
		//地图标记方法，可以另一个图层标记，暂时未用
		function multiMarkerMap() {
			var center = new TMap.LatLng(39.984120,116.307484);//设置中心点坐标
			//初始化地图
			var multiMap = new TMap.Map(container, {
			    center: center
			});
			 
			//创建并初始化MultiMarker
			var markerLayer = new TMap.MultiMarker({
			    map: multiMap,  //指定地图容器
			    //样式定义
			    styles: {
			        //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
			        "myStyle": new TMap.MarkerStyle({ 
			            "width": 25,  // 点标记样式宽度（像素）
			            "height": 35, // 点标记样式高度（像素）
			            "src": '../img/marker.png',  //图片路径
			            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
			            "anchor": { x: 16, y: 32 }  
			        }) 
			    },
			    //点标记数据数组
			    geometries: [{
			        "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
			        "styleId": 'myStyle',  //指定样式id
			        "position": new TMap.LatLng(39.954104, 116.357503),  //点标记坐标位置
			        "properties": {//自定义属性
			            "title": "marker1"
			        }
			    }, {//第二个点标记
			        "id": "2",
			        "styleId": 'marker',
			        "position": new TMap.LatLng(39.994104, 116.287503),
			        "properties": {
			            "title": "marker2"
			        }
			    }
			    ]
			});
		};
		// multiMarkerMap();
    </script>
</body>

</html>